<template>
  <div class="qrcode-box">
    <div class="qrcode-wrapper">
      <div class="qrcode-header">
        <div class="title-directions">
          <p class="title">{{info.meetingName}}</p>
          <p class="directions">出示下方二维码或参会码签到</p>
        </div>
        <div class="status"
          :class="{
            'not-start': info.meetingStatus == 1,
            processing: info.meetingStatus == 2,
            end: info.meetingStatus == 3,
          }">{{info.meetingStatus | handleMeetingStatus}}</div>
      </div>
      <div class="qrcode-cont">
        <div class="qrcode">
          <qrCode
            :url="qrcodeSrc"
            :width="156"
            :height="156"/>
        </div>
        <div class="code-copy"
          v-if="info.code">
          <p class="code">参会码：{{info.code}}</p>
          <p class="copy"
            :class="`participate-code${info.code}`"
            @click="handleCopy(info.code)">复制</p>
        </div>
      </div>
      <div class="qrcode-bottom"
        @click="handleClose()">我知道了</div>
    </div>
  </div>
</template>
<script>
import ClipboardJS from 'clipboard'
import qrCode from '../../../components/qr-code'
export default {
  components: {
    qrCode
  },
  props: {
    info: {
      type: Object
    }
  },
  data () {
    return {
      sessionId: '',
      qrcodeSrc: '',
      clipboard: null
    }
  },
  methods: {
    // 复制
    handleCopy (code) {
      let classSelector = `.participate-code${code}`
      this.clipboard = new ClipboardJS(classSelector, {
        text: function (trigger) {
          return code
        }
      })
      this.$toast('复制成功')
    },
    getSessionId () {
      let url = `/session/create`
      let params = {
        agentId: sessionStorage.getItem('agentId'),
        corpId: sessionStorage.getItem('corpId')
      }
      this.$posts(url, params).then(res => {
        if (res.code === 200 && res.data) {
          this.sessionId = res.data
          this.qrcodeSrc = `${location.origin}${this.BASE_URL}${this.VERSION}/home?meetingId=${this.info.meetingId}&sessionId=${this.sessionId}`
        }
      })
    },
    handleClose () {
      this.$emit('handleClose')
    }
  },
  filters: {
    handleMeetingStatus (status) {
      switch (Number(status)) {
        case 1:
          return '未开始'
        case 2:
          return '进行中'
        case 3:
          return '已过期'
      }
    }
  },
  created () {
    this.getSessionId()
  }
}
</script>
<style lang="stylus" scoped>
.qrcode-box
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  z-index 1000
  background rgba(0,0,0,0.6)
  display flex
  justify-content center
  align-items center
  .qrcode-wrapper
    width 280px
    background #fff
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1)
    border-radius 10px
    .qrcode-header
      width 100%
      padded_box(border-box, 12px 0 12px 12px)
      border-bottom 1px dashed #EEEEEE
      display flex
      justify-content space-between
      align-items center
      .title-directions
        width 200px
        .title
          width 100%
          height 22px
          line-height 22px
          font-size 16px
          font-weight 700
          color #333333
          noWrap()
        .directions
          height 17px
          line-height 17px
          font-size 12px
          color #999999
          margin-top 2px
      .status
        padded_box(border-box, 4px 8px)
        border-radius 13px 0 0 13px
        line-height 18px
        font-size 12px
        &.not-start
          background: rgba(179, 147, 71, 0.1);
          color #B39347
        &.processing
          background: rgba(255, 140, 25, 0.1);
          color #FF8C19
        &.end
          background #eee
          color #999999
    .qrcode-cont
      width 100%
      padded_box(border-box, 12px 62px)
      border-bottom 1px solid #E9EAED
      .qrcode
        width 156px
        height 156px
        background #ededed
        img
          display block
          width 100%
      .code-copy
        width 100%
        display flex
        justify-content space-between
        margin-top 8px
        p
          height 18px
          line-height 18px
          font-size 12px
          color #333
          &.copy
            color #0083FF
    .qrcode-bottom
      width 100%
      line-height 25px
      text-align center
      font-size 18px
      font-weight 700
      color #0083FF
      padded_box(border-box, 12px)
</style>
